iT邦幫忙

2024 iThome 鐵人賽

DAY 5
0
Mobile Development

Swift iOS UIKit 初學者系列:從零開始開發互動式應用系列 第 5

【Day 05】打造書本預覽頁:無需程式碼使用 Scroll View 實現圖片捲動

  • 分享至 

  • xImage
  •  

導言

昨天我們用 Table View Controller 實現了書本的選單瀏覽,今天我們將深入學習如何使用 Scroll View 來展示多張書本結局預覽圖片,並實現左右捲動的效果。你將看到 Scroll View 如何提升用戶的互動體驗,且依然不需要撰寫程式碼!

今天學習目標

  • 透過 Storyboard 添加並設置 Scroll View。
  • 設定 Scroll View 的內容大小 (content size),確保所有的圖片都能捲動顯示。
  • 將圖片按順序排列,並啟用 Paging 功能以頁為單位捲動。將圖片按順序排列,並啟用 Paging 功能以頁為單位捲動。
  • 設置一個按鈕作為進入故事的入口,提供更多互動性。

預覽效果

在完成這篇教程後,使用者可以滑動 Scroll View 來瀏覽多張書本結局預覽圖片,並在適當位置點擊按鈕進入下一個場景。

教學步驟

Step 1: 新增 View Controller

  • 打開 Main.storyboard,從物件庫中拖入一個 View Controller,這將作為展示書本結局預覽的畫面。
  • 將 View Controller 移到第一本書的書本選單頁及 和書本的起點頁 ViewController 之間。
  • 加入一個按鈕:拖入一個 UIButton 並將其放置在 View 的最底部。這個按鈕將引導使用者進入下一個故事章節,你可以自定義按鈕的外觀和文字,例如「開始冒險」。
  • 調整畫面布局:確保該 View Controller 與書本選單頁面通過 segue 相連,並把開始冒險按鈕通過 segue 連到故事的第一頁。

Step 2: 添加 Scroll View

  • 從物件庫中拖入 Scroll View:設置 Scroll View 的尺寸為 300x500,這將決定可視區域的大小。你可以根據實際應用需求調整這個數值。
  • 加入內容 View:在 Scroll View 中拖入一個普通的 View,它將作為承載圖片的容器。在這個 View 上,我們將會添加圖片,並確保其大小足以容納所有圖片。

Step 3: 配置 Scroll View 的內容

  • 按 內容 View 先移出 Scroll View ,拉到最上層 Viwe 的外面,會看到 view 顯示在 View Controller 上面,方便我們進行編輯 。

  • 設置內容 View 的尺寸:假設我們有 8 張寬度為 300px 的圖片,這意味著我們需要將內容 View 的寬度設為 2400px(8 張圖片 × 每張 300px)。高度保持為 500px,以與 Scroll View 的高度一致。

  • 添加圖片:拖入 8 個 UIImageView 並分別設置圖片,將每個圖片的寬度設為 300px,確保圖片不會重疊。這些圖片將是用戶可以捲動查看的書本結局預覽。

  • 將 View 放回 Scroll View:將內容 View 放回 Scroll View 中,並確保其 X 坐標設為 0,對齊 Scroll View 的左上角。

Step 4: 設定 Scroll View 的 Content Size

  • 設定 Content Size:點選 Scroll View,然後在右側屬性面板中的 User Defined Runtime Attributes 新增一個 contentSize 屬性,並設為 2400x0。這會讓 Scroll View 知道它的內容需要多寬,以便能夠左右捲動,因為是左右捲動,所以在這裡不用設定高度值。

  • 啟用 Paging:在 Attributes Inspector 中,啟用 Paging Enabled 選項,讓 Scroll View 以頁為單位捲動。這樣每次滑動將停在圖片的邊緣,提供更佳的用戶體驗。

Step 5: 測試應用

  • 運行應用並滑動 Scroll View,你會發現使用者可以左右捲動查看多張圖片,且每張圖片都能順利捲動並停留在頁面邊緣。點擊按鈕可進一步操作。

回顧重點

  • 透過 Storyboard 添加 Scroll View 並設置其內容尺寸,無需撰寫程式碼。
  • 學習如何通過 Paging Enabled 提供更好的滑動體驗。
  • Scroll View 可以用來顯示大量內容或圖片,是展示書本預覽、商品或故事結局的好工具。

總結

今天我們學習了如何使用 Scroll View 來展示豐富的書本內容,並實現左右捲動效果。這個技巧不僅適合書本介紹,還能應用於許多其他需要展示大量圖片的情境。通過調整 content size 和啟用 Paging,我們能夠實現更平滑且直觀的用戶體驗。

附錄:已接觸的 UIKit 元件

  • UILabel (Day 01)– 顯示文字。
  • UIButton (Day 01)– 處理按鈕的點擊事件。
  • UIImageView (Day 01)– 顯示圖片。
  • UINavigationController (Day 02)– 管理畫面之間的導航,提供返回按鈕。
  • Segue (UIStoryboardSegue) (Day 02)– 在畫面之間進行跳轉。
  • Relationship Segue (Day 03)– 建立控制器之間的層級關係。
  • UITabBarController(Day 03) – 底部導航。
  • UITableViewController(Day 04)– 顯示和管理大量的列表內容。
  • UITableViewCell(Day 04)– 設計和顯示列表中的每個單元格。
  • UIScrollView (Day 05)– 顯示可捲動的內容,特別適合顯示大量的圖片或文字。

參考


上一篇
【Day 04】使用 Table View Controller 輕鬆設計書本選單 。
下一篇
【Day 06】Auto Layout 修練 - 1 - 雪地動物圖集:圖片比例與佈局設計
系列文
Swift iOS UIKit 初學者系列:從零開始開發互動式應用30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言